<template>
  <div class="MyTravel">

    <v-layout :class="{'Finance-form':isActive}">
      <div class="system-panel">
        <h2>Maintain Territory</h2>
        <div class="system-btns">
          <v-dialog v-model="dialog"
                    width="30%">
            <template v-slot:activator="{ on, attrs}">
              <v-btn depressed
                     :class="{'Search-btn':isActive}"
                     v-bind="attrs"
                     v-on="on">New
              </v-btn>
            </template>
            <v-card>
              <v-card-title class="headline grey lighten-5">
                Maintain City and Daily Allowance
              </v-card-title>
            </v-card>
            <v-card-text>
              <div class="pending-form-info-left system-popup">
                <div class="pending-form-info-block">
                  <label>Territory</label>
                  <v-select :items="Territoryitems"
                            solo></v-select>
                </div>
                <div class="pending-form-info-block">
                  <label>Province</label>
                  <v-select :items="Provinceitems"
                            solo></v-select>
                </div>
                <div class="pending-form-info-block">
                  <label>City</label>
                  <v-select :items="Cityitems"
                            solo></v-select>
                </div>
                <div class="pending-form-info-block">
                  <label>Daily Travel Allowance Amount</label>
                  <v-select :items="Amountitems"
                            solo></v-select>
                </div>
                <div class="pending-form-info-block">
                  <label>Remarks</label>
                  <v-textarea solo
                              name="input-7-4"
                              label="Solo textarea"></v-textarea>
                </div>
              </div>
            </v-card-text>
            <v-card-actions :class="{'system-dialog':isActive}">
              <v-btn color="primary"
                     text
                     @click="dialog = false"
                     :class="{'Selete-btn':isActive}">
                Selete
              </v-btn>
              <v-btn color="primary"
                     text
                     @click="dialog = false">
                Closed
              </v-btn>
            </v-card-actions>
          </v-dialog>
          <v-btn depressed
                 :class="{'Search-btn system-delete-btn':isActive}"
                 v-bind="attrs"
                 v-on="on">Delete
          </v-btn>
        </div>
      </div>
      <v-data-table class="table form-table systemConfig-table"
                    :hide-default-footer='true'
                    :headers="headers"
                    :disable-sort="true"
                    :items-per-page="1000"
                    :items="desserts">
        <template v-slot:header.add="{ header }"></template>

        <template v-slot:item.territory="props">
          <v-edit-dialog :return-value.sync="props.item.territory"
                         @save="save"
                         @cancel="cancel"
                         @click:outside="save1"
                         @open="open"
                         @close="close">
            {{ props.item.territory }}
            <template v-slot:input>
              <v-select v-model="props.item.territory"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.province="props">
          <v-edit-dialog :return-value.sync="props.item.province"
                         @save="save"
                         @cancel="cancel"
                         @open="open"
                         @close="close">
            {{ props.item.province }}
            <template v-slot:input>
              <v-select v-model="props.item.province"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.City="props">
          <v-edit-dialog :return-value.sync="props.item.City"
                         @save="save"
                         @cancel="cancel"
                         @open="open"
                         @close="close">
            {{ props.item.City }}
            <template v-slot:input>
              <v-select v-model="props.item.City"
                        :items="items"
                        dense></v-select>
            </template>
          </v-edit-dialog>
        </template>
        <template v-slot:item.MaintainedDate="props">
          <v-edit-dialog :return-value.sync="props.item.MaintainedDate"
                         @save="save"
                         @cancel="cancel"
                         @open="open"
                         @close="close">
            {{ props.item.MaintainedDate }}
            <template v-slot:input>
              <v-date-picker v-model="props.item.MaintainedDate"
                             color="orange lighten-5"></v-date-picker>
            </template>
          </v-edit-dialog>
        </template>
      </v-data-table>
    </v-layout>
  </div>
</template>

<script>
  export default {
    data: () => ({
      isActive: true,
      dialog: false,
      admins: [
        'Management',
        'Settings',
      ],
      cruds: [
        'Create',
        'Read',
        'Update',
        'Delete',
      ],
      selectedItem: 1,
      headers: [
        {text: 'Territory', value: 'Territory'},
        {text: 'Province', value: 'Province'},
        {text: 'City', value: 'City'},
        {text: 'Daily travel allowance amount (RMB)', value: 'dailyAmount'},
        {text: 'Remarks', value: 'Remarks'},
        {text: 'Maintained by', value: 'MaintainedBy'},
        {text: 'Maintained date', value: 'MaintainedDate'},
        {text: '', value: 'Edit'},
      ],
      Menuitems: [
        {title: 'My travel allowance requests'},
        {title: 'Requests for others'},
        {title: 'Approving requests'},
        {title: 'Finance operations'},
        {title: 'System configuration'},
        {title: 'Report centre'},
        {title: 'Home'},
      ],
    })
  }
</script>

<style scoped>

</style>
